<div class="wrap">
    <h2>Add Audio</h2>
    <form id="html5av-audio-add-panel">
        <p>
            <label for="html5av-audio-add-panel-title">Title:</label><br />
            <input type="text" id="html5av-audio-add-panel-title"
                   style="width: 99%"/>
        </p> 

        <p>
            <label for="html5av-audio-add-panel-alt">Alt:</label><br />
            <input type="text" id="html5av-audio-add-panel-alt" 
                   style="width: 99%"/>
        </p>

        <p>
            <label for="html5av-audio-add-panel-view">View:</label><br />
            <select id="html5av-audio-add-panel-view" >
                <?php foreach ($audioViews as $value => $selected) : ?>
                    <option value="<?php echo $value ?>"
                            <?php echo $selected ?> ><?php echo $value ?></option>
                        <?php endforeach; ?>
            </select>
        </p>

        <p>Note: add audio file while in editor!</p>

        <input type="submit"
               value="Save and Open Editor" />
    </form>
</div>

<div id="html5av-post-audio-upload-editor"></div>

<script type="text/javascript">
    var html5av_api = '<?php echo html5av_manager::getApiURL(); ?>';
    
    function html5avAddaudioCheck() {
        var title = jQuery('#html5av-audio-add-panel-title').val();
        var noError = true;
        var msg = '';
        if(title == '') {
            noError = false;
            msg += "Title cannot be left blank\n";
        }
        
        if(!noError) {
            alert(msg);
        }
        
        return noError;
    }
    
    jQuery(function($) {
        $('#html5av-post-audio-upload-editor').dialog({
            autoOpen: false,
            width: 800,
            height: 600,
            minWidth: 800,
            minHeight: 600,
            modal: true
        });
        
        $('#html5av-audio-add-panel').submit(function() {
            if(html5avAddaudioCheck()) {
                var title = jQuery('#html5av-audio-add-panel-title').val();
                var alt = jQuery('#html5av-audio-add-panel-alt').val();
                var view = jQuery('#html5av-audio-add-panel-view').val();
                var post = {
                    action: 'html5av_manager',
                    node:'add_new_audio',
                    title:title,
                    alt:alt,
                    view:view
                };
                $.post(ajaxurl, post, function(id) {
                    var post = {
                        action: 'html5av_manager',
                        node:'get_media_editor',
                        avid:id
                    }
                    jQuery.post(ajaxurl, post, function(data) {
                        jQuery('#html5av-audio-add-panel-title').val('');
                        jQuery('#html5av-audio-add-panel-alt').val('');
                        if(jQuery('#html5av-widget').size() > 0) {
                            jQuery('#html5avmanagerid').val(id);
                            html5avWidgetCheck();
                            jQuery('#html5av-widget-editor-dialog').html(data);
                            jQuery('#html5av-widget-editor-dialog').dialog('open');
                            jQuery('#html5av-widget-add-audio-dialog').dialog('close');
                            jQuery('#html5av-widget-add-audio-dialog').html('');
                        } else {
                            jQuery('#html5av-post-audio-upload-editor').html(data);
                            jQuery('#html5av-post-audio-upload-editor').dialog('open');
                        }
                    });
                });
            }
            return false;
        });
    });
</script>